<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Js_dom_test</title>
</head>
<body>
    <img id="h1" src="../1.jpg"> <br><br>

    <div class="cls">传智教育</div> <br>
    <div class="cls">黑马程序员</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    /* //获取element元素
    //获取元素-id获取
    var img = document.getElementById('h1');
    alert(img);

    //标签获取
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }

    //name属性获取
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        alert(ins[i]); 
    }

    //class属性获取
    var clas = document.getElementsByClassName('cls');
    for (let i = 0; i  < clas.length; i++) {
        alert(clas[i]);
    }

    //修改元素
    var divs2 = document.getElementsByClassName('cls');
    var div1 = divs2[0];

    div1.innerHTML = "博瑞小美女"; */

    //修改图片src
    var img = document.getElementById('h1');
    img.src = "../抠图1.png"

    //修改所有div属性
    var divs3 = document.getElementsByTagName('div');
    for (let i = 0; i < divs3.length; i++) {
        const div = divs3[i];
        div.innerHTML += "<font color='red'>hello!</font>";
    }

    //选中复选框
    var ins1 = document.getElementsByName('hobby');
    for (let i = 0; i < ins1.length; i++) {
        const element = ins1[i];
        element.checked = true;
    }
</script>
</html>